<template>
    <view>
        <u-tabs :list="list" @change="change" :current="current" :is-scroll="false"
                bg-color="#0f0e2d" inactive-color="#4e5278" active-color="#00eaff"
                :active-item-style="{color: '#00eaff', fontSize: '28rpx'}">
        </u-tabs>
        <view class="ranking-container">
            <view v-for="(item, index) in rankingList" :key="index" class="background">
                <view class="top1" v-if="index===0">
                    <view class="image">
                        <u-avatar size="110" :src="item.avatar"
                                  style="box-shadow: 0 0 6px 2px #000, 0 0 6px 2px #fff;border-radius: 50%;"/>
                    </view>
                    <view>
                        <view class="name">{{ item.nickname }}</view>
                    </view>
                    <view class="price">
                        <view class="price-text">
                            <i class="custom-icon custom-icon-objects-color_diamond"
                               style="padding-right: 10rpx;color: #65a5c7"></i>
                            {{ item.sum_coin }}
                        </view>
                    </view>
                </view>
                <u-row gutter="16" v-else>
                    <u-col span="2">
                        <view class="ranking">
                            <text>{{ index + 1 }}</text>
                        </view>
                    </u-col>
                    <u-col span="2">
                        <view class="image">
                            <u-avatar size="80" :src="item.avatar"/>
                        </view>
                    </u-col>
                    <u-col span="4" text-align="center">
                        <view class="name">{{ item.nickname }}</view>
                    </u-col>
                    <u-col span="4">
                        <view class="price">
                            <view class="price-text">
                                <i class="custom-icon custom-icon-objects-color_diamond"
                                   style="padding-right: 10rpx;color: #65a5c7"></i>
                                {{ item.sum_coin }}
                            </view>
                        </view>
                    </u-col>
                </u-row>
                <!--                <view v-else class="top2">-->
                <!--                    -->
                <!--                   -->
                <!--                    <view>-->
                <!--                       -->
                <!--                    </view>-->
                <!--                    -->
                <!--                </view>-->
            </view>
        </view>
        <view class="my-ranking">
            <u-row gutter="16">
                <u-col span="2" text-align="center">
                    <text>My</text>
                </u-col>
                <u-col span="2">
                    <view class="image">
                        <u-avatar size="80" :src="user.avatar"/>
                    </view>
                </u-col>
                <u-col span="4" text-align="center">
                    <view class="name">{{ user.nickname }}</view>
                </u-col>
                <u-col span="4">
                    <view class="price">
                        <view class="price-text">
                            <i class="custom-icon custom-icon-objects-color_diamond"
                               style="padding-right: 10rpx;color: #65a5c7"></i>
                            {{ my }}
                        </view>
                    </view>
                </u-col>
            </u-row>
        </view>
    </view>
</template>
<script>
export default {
    name: 'ranking',
    data() {
        return {
            list: [
                {
                    name: 'Today\'s ranking'
                },
                {
                    name: 'Yesterday\'s ranking'
                }
            ],
            current: 0,
            rankingList: [],
            my: ''
        }
    },
    computed: {
        user() {
            return this.$store.getters.getUser ? this.$store.getters.getUser : {};
        }
    },
    mounted() {
        this.getRankingList();
    },
    methods: {
        // 切换
        change(index) {
            this.current = index;
            this.getRankingList()
        },
        getRankingList() {
            this.$u.api.getRankingList({
                type: this.current
            }).then(res => {
                if (res.code === 1) {
                    this.rankingList = res.data.list;
                    if (res.data.my) {
                        this.my = res.data.my;
                    } else {
                        this.my = 0;
                    }

                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.ranking-container {

}

.top1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .image {
        width: 180rpx;
        height: 180rpx;
        background-image: url("@/static/images/rankingTop1.png");
        background-size: 180rpx 180rpx;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .price {
        padding-top: 10rpx;
    }

}


.ranking {
    border: 2px solid #20264d; /* 白色边框 */
    border-radius: 50%; /* 圆形边框 */
    display: inline-block; /* 或 display: block;，取决于你想要的布局 */
    width: 50rpx; /* 宽度和高度需要根据你的数字大小来调整 */
    height: 50rpx;
    line-height: 50rpx; /* 垂直居中数字 */
    text-align: center; /* 水平居中数字 */
}

.price {
    padding-top: 10rpx;
}

.background {
    margin: 20rpx;
    border-radius: 20rpx;
}

.background:nth-child(even) {
    background-color: #181e3c;
}

.my-ranking {
    //display: flex;
    //flex-direction: row;
    //align-items: center;
    //justify-content: space-around;
    margin: 20rpx;
    border-radius: 20rpx;
    background-color: #222a4e;
    border: 2px solid #20264d; /* 白色边框 */
}
</style>